Google has now automated this so it is super easy to do now. My old instructions from 2005 are now obsolete.
Step 1 - Create a Google map
Go to Google Maps (maps.google.com) and create the map you want. Drop in the elements you want (place markers, etc). The tools Google has placed there make it really easy to use.
You don't have to make the map public.
Step 2 - Grab the HTML to imbed from Google Maps
From Google Maps:
- Edit your map
- Click "Link" command (upper right side). A small dropdown panel appears under the command.
- Click "Customize and preview embedded map". A new browser windows pops open.
- For "Step 1 - Customize", choose "custom" and set both width and height to 400.
- For "Step 3 - Copy and paste this HTML to embed in your website", do that. Select the HTML it presents in the box and copy it (Windows users can press Control-C, Mac users can press Command-C).
Now we will create a blog post that contains the map. Create a new post, go into "Edit HTML" mode, and paste the code from step 2.
That is it!
Now let's tweak the map to show your content!
If you carefully examine the HTML you copy and pasted from Google Maps, you will see that it mostly consists of just two HTML commands, a <iframe> and a <a>.
Both commands have an attribute with the exact same value. The <iframe> has a "src=" attribute, and the <a> has an "href=" attribute.
The values for both attributes are the same, a URL to your customer map. The URL consists of a location "http://maps.google.com/maps/ms?" followed by a number of name/value pair arguments.
In order to further tweak the map, we will be adding to or altering the values of some of these argument name/value pairs. Make the same changes to both URL's so they are consistent.
Step 4 - Update Target Coordinates
You need to tell Google Maps where on earth it should display. Do this with the latitude and longitude of the location of what you want to look at (your target). Read the chapter on Geocaching on how to get the coordinates. They need to be in decimal format. For example, the coordinates of Monterey, California used are latitude=36.610429, longitude=-121.896143. Notice that the numbers can be positive or negative. Six decimal places of precision of plenty for Google Maps. Any more than 6 digits is overkill.
Edit the post with the map in HTML mode. In there you will see occurrences of the following Javascript statements:
The actual values are from your custom map. Replace the values with your coordinates, then publish the blog post. View the post. It should now be looking at your target.
For example: 51.502332,-0.153122 shows London, England.
Step 5 - Set Zoom Factor
You also need to tell Google Earth what zoom factor to use. This is an integer from 0 to about 20. Increase it zoom in closer. Decrease it to zoom out ('0' shows the whole earth!). I've found that a value of 14 is a good place to start.
Edit the post with the map in HTML mode. In there you will see the Javascript statement:
Replace 14 with your desired value, then publish the blog post. View the post. It should now be looking at your target at the scale you want. Keep tweaking the zoom until you get it the way you want.
Step 6 (Optional) - Change Map Type
Sets the type of map you want to display... Map, Satellite, or Hybrid. Right now it is set to Map.
Edit the post with the map in HTML mode. You will need to add a URL argument to the <iframe> source attribute.
The last argument in both the iframe and href attributes is:
You need to add another argument to the line... The "T=?" argument.
The available options are "m" map, "k" satellite, "h" hybrid, "p" terrain. Replace ? with one of the following values then publish the blog post. View the post.
- For a map image use m
- For a satellite image use k
- For a hybrid image use h
- For a terrain image use p
The dimensions of the map are specified in the <iframe> tag. I recommend 400 x 400 pixels, which I find fits perfect in Blogger's blogs. However, if you want to change the size, then knock yourself out.
Edit the post with the map in HTML mode. In there you will see the HTML statement
Replace 400 with the width and hieght you desire. Then publish the blog post and view the post to see how it looks.
Publish the blog post. View the post. It should all be working now!
If you have some problems, click here for some advanced tutorial.
View Monterey in a larger map
